<template>
  <div class="refs-child">
    <h4>子组件</h4>
    <div class="component-content">
      <p>这是子组件的内容</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RefsChildComponent',
  
  data() {
    return {
      message: 'Hello from child!'
    }
  },
  
  methods: {
    getData() {
      return this.message
    },
    
    showMessage() {
      this.$message.info('子组件方法被调用了!')
    }
  }
}
</script>

<style scoped>
.refs-child {
  background: #f5f7fa;
  border-radius: 4px;
  padding: 10px;
}

.component-content {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
}

h4 {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 14px;
}
</style> 